<template>
 <div class="wraper">
    <swiper :options="swiperOption">
    <!-- slides -->
    <swiper-slide v-for="item of swiperList" :key="item.id">
        <img :src="item.imgUrl">
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
  </div>
</template>
 
<script>
export default {
    name:"HomeSwiper",
    data(){
        return {
            swiperOption:{
                pagination:'.swiper-pagination',
                loop:true,
                
            },
            swiperList:[
                {
                    id:'1',
                    imgUrl:"http://img1.qunarzz.com/piao/fusion/1811/31/da037478f37cf202.jpg_750x200_fe28d396.jpg"
                },
                {
                    id:'2',
                    imgUrl:"http://img1.qunarzz.com/piao/fusion/1810/eb/5cacf42b59e91e02.jpg_750x200_9c0a77b0.jpg"
                }
            ]
        }
    }
}
</script>

<style lang="stylus" scoped>
  .wraper >>> .swiper-pagination-bullet-active{
      background-color :white;
      }
  .wraper{
      overflow:hidden;
      width :100%;
   }
   img{
       width :100%;
   }
</style>


